<template>
  <div class="zhuan-head">
    <div class="more">
      <span class="iconfont icon-xiaoyuhao"></span>
      <span>更多品牌</span>
      <span class="iconfont icon-zhuanfa">
      </span>
    </div>
    <div class="story">探索更多</div>
  </div>
</template>

<script>
export default {
  name: "ZhuanHead",
};
</script>

<style scoped>
@import url(../../../assets/cao-iconfont/iconfont.css);
.zhuan-head {
  height: 1.7rem;
  /* background-color: pink; */
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgxnzy-c2c.uulian.com.cn%2Fdata%2Ffiles%2Fstore%2Ftemplate%2F201712181713431094.jpg&refer=http%3A%2F%2Fgxnzy-c2c.uulian.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657424359&t=31a48597bffd60a79e7e419bb26410ca");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.more {
  position: absolute;
  top: 0.4rem;
  margin-left: 0.2rem;
}
.more span {
  font-size: 0.18rem;
  color: white;
}
.more span:nth-child(2) {
  margin-left: 1.8rem;
}
.more span:nth-child(3) {
  margin-left: 0.3rem;
}
.story {
  width: 0.75rem;
  height: 0.4rem;
  position: absolute;
  top: .8rem;
  left: 3rem;
  background-color: #77767b;
  opacity: 0.3;
  border-radius: .2rem 0 0 .2rem;
  text-align: center;
  line-height: .4rem;
  color: white;
}
</style>